<template>
  <div
    class="index-map container-nh"
    :class="[isSmall ? 'small-container' : '']"
    id="map"
  ></div>
</template>
<style lang="scss" scoped>
#map {
  width: 100%;
  height: 600px;
}
</style>
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";

export default {
  name: "Map",
  props: {
    isSmall: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      BASEURL: process.env.VUE_APP_BASEURL,
      pointList: [],
      activeIndex: 0,
      // indexTitle: this.$t("components.map.route"),
      indexTitle: "components.map.route",
      mapList: {
        // title: this.$t("components.map.parkService"),
        title: "components.map.parkService",
        icon: "&#xe656;",
        list: [],
      },
      luxian_obj: {
        // title: this.$t("components.map.boutiqueRoute"),
        title: "components.map.boutiqueRoute",
        icon: "&#xe657;",
        list: [],
      },
      isshow: true,
      map: "",
    };
  },
  methods: {
    initMap() {
      let map = L.map("map", {
        minZoom: 15,
        center: [39.607934, 118.164615],
        // errorTileUrl:'http://nhwa.souldog.cn/uploads/dt.png',
        zoom: 16,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857,
      });
      // console.log(map)
      this.map = map;
      window.map = map;
      var imageUrl = "http://nhwa.souldog.cn/uploads/dt.png",
        imageBounds = [
          [39.582888, 118.142665],
          [39.613882, 118.1805],
        ];
      L.imageOverlay(imageUrl, imageBounds).addTo(map);
      L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      ).addTo(map);
      var myIcon = L.icon({
        iconUrl: "http://nhwa.souldog.cn/uploads/point.png",
        iconSize: [38, 38],
        iconAnchor: [22, 94],
        popupAnchor: [-3, -76],
      });
      // L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
      L.marker([39.606906, 118.169763], {
        icon: myIcon,
      }).addTo(map);
      L.marker([39.613632, 118.180965], {
        icon: myIcon,
      })
        .addTo(map)
        .bindPopup("A pretty CSS3 popup.<br> Easily customizable.")
        .openPopup();
      // L.tileLayer("http://{s}.souldog.cn/uploads/dt/{z}/{x}/{y}{r}.png?{foo}", {foo: 'bar', attribution: '&copy; <a href="http://nhwa.souldog.cn/uploads/dt">OpenStreetMap</a> contributors'}).addTo(map);
    },
  },
  mounted() {
    const that = this;
    that.$nextTick(() => {
      that.initMap();
    });
  },
  destroyed() {
    // clearDriving();
  },
};
</script>
